<template>
    <div class="PerformanceChart">
        <!-- 绩效折线图 -->
        <box-group-wrap pageTitle="绩效折线图" :isShowData="isShowData">
            <template slot="wrapBody">
                <div class="manceChart">
                    <div id="containerecharts" ref="containerecharts" style="height: 100%"></div>
                </div>
            </template>
        </box-group-wrap>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
// import { isEmptyObject } from '@/utils/Object';
import { getToken, removeToken, getTokenHsbankNo } from '@/utils/auth';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';
import echarts from 'echarts'
import moment from "moment";
export default {
    name: 'PerformanceChart',
    data() {
        return {
            tableData: [],
            month: '',
            option: '',
            isShowData: false,
            currentMonth: [],
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap, },
    computed: {
        ...mapGetters([
            'userInfo',
        ])
    },
    mounted() {
        this.isShowData = true;
        this.month = moment().format('yyyy-MM') + '-01';
        this.$nextTick(() => {
            const times1 = setInterval(() => {
                this.getEchartData();
                clearInterval(times1);
            }, 1000);
        })
    },
    methods: {
        // 请求初始化页面数据
        getEchartData() {
            // console.log('获取当月月份数据', this.month);
            let params = {
                id: this.userInfo.id,
                month: this.month,
                staffName: getToken() ? JSON.parse(getToken()).userName : '',
            };
            this.$post.homePage.dateFormChart(params).then((res) => {
                // console.log('绩效__echarts数据', res);
                if (res.data.success) {
                    this.isShowData = true;
                    this.tableData = res.data.content || [];
                    const sixMonth = res.data.content[0].sixMonth || [];
                    this.formatDataMonth(sixMonth);
                    // this.total = res.data.content.total;
                    // console.log('this.scoreNearBySix', this.tableData[0].scoreNearBySix);
                    // console.log('this.scoreNearBySix', this.tableData[1].scoreNearBySix);
                    this.initChart();
                } else {
                    this.isShowData = false;
                }
            });
        },

        //格式化 请求过来的日期
        formatDataMonth(arr) {
            if (arr) {
                arr.forEach(element => {
                    this.currentMonth.push(moment(element).format('M'));
                });
            }
        },
        // 初始化echarts
        initChart() {
            // console.log('this.tableData_____echarts数据', this.tableData);
            if (this.tableData.length < 0) return false;
            // console.log('初始化echarts___tableData数据  ', this.tableData);
            const dom = this.$refs.containerecharts;
            const myChart = echarts.init(dom);
            let app = {};
            this.option = null;
            this.option = {
                color: ['#006dfd', '#ffaf37'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [this.tableData[0].staffName, this.tableData[1].staffName]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [`${this.currentMonth[0]}月`, `${this.currentMonth[1]}月`, `${this.currentMonth[2]}月`, `${this.currentMonth[3]}月`, `${this.currentMonth[4]}月`, `${this.currentMonth[5]}月`],
                },
                yAxis: {
                    type: 'value',
                    name: '分数',
                    min: 50,
                    max: 110,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name: this.tableData[0].staffName,//'个人',
                        type: 'line',
                        barWidth: 15,
                        data: this.tableData[0].scoreNearBySix//[120, 132, 101, 134, 90, 210]
                    },
                    {
                        name: this.tableData[1].staffName,//'小组',
                        type: 'line',
                        barWidth: 15,
                        data: this.tableData[1].scoreNearBySix,// [220, 232, 201, 234, 190, 310]
                    }
                ]
            };
            if (this.option && typeof this.option === "object") {
                myChart.setOption(this.option, true);
            }
        }
    },
}
</script>
<style scoped lang="scss">
.PerformanceChart {
    .manceChart {
        height: 255px;
    }
}
</style>